<template>
	<!-- <skeleton :skeleton="{name:'studentAnalysis'}" :showSkeleton="showSkeleton">
		<block slot="content">-->
	<noData :showErrorTip="noData">
		<view slot="content" class="content">
			<student-info :studentInfo="studentData.studentInfo" :name="keyName"></student-info>
			<custom-select 
			v-if="examList.length>0"
			class="cus-select" 
			:selectData="examList" 
			:currentValue="currentValue" 
			@change='examChange' 
			:name="keyName"></custom-select>
			<view v-if="examList.length>0" class="student-rank">
				<view class="student-rank-item">
					<view class="score">{{class_rank}}名</view>
					<view class="tit">班级排名</view>
				</view>
				<view class="student-rank-item">
					<view class="score">{{college_rank}}名</view>
					<view class="tit">专业排名</view>
				</view>
				<view class="student-rank-item">
					<view class="score">{{province_rank}}名</view>
					<view class="tit">省份排名</view>
				</view>
				<view class="student-rank-item">
					<view class="score">{{school_rank}}名</view>
					<view class="tit">学校排名</view>
				</view>
			</view>
			<plat title="学习分析">
				<grid class="summary" :column="4" :gridData="studentData.study"></grid>
			</plat>
			<plat title="考试分析" v-if="showLine">
				<canvas canvas-id="canvasLine" id="canvasLine" :style="{'width':lineData.width+'px','height':lineData.height+'px'}"
				@touchend="touchEndLine"></canvas>
			</plat>
			<plat title="错误占比" v-if='showRadarOne||showRadarTwo'>
				<view v-if="showRadarOne">
					<view class="chart-title">- 一级知识点分析 -</view>
					<canvas canvas-id="radarOne" id="radarOne" class="chart" :style="{'width':radarOne.width+'px','height':radarOne.height+'px'}"></canvas>
				</view>
				<view v-if="showRadarTwo">
					<view class="chart-title">- 二级知识点分析 -</view>
					<canvas canvas-id="radarTwo" id="radarTwo" class="chart" :style="{'width':radarTwo.width+'px','height':radarTwo.height+'px'}"></canvas>
				</view>
			</plat>
			<plat v-if='showKnowledge'>
				<view class="chart-title">- {{major}}专业知识点明细分析 -</view>
				<knowledge :dataList="knowledgeAnalysis"></knowledge>
			</plat>
			<plat title="成绩榜" v-if="showRank">
				<exam-rank :dataList="rank"></exam-rank>
				<view class="look-more" @click="lookMore">查看更多</view>
			</plat>
		</view>
	</noData>
	<!-- </block>
	</skeleton> -->
</template>

<script>
	var canvasRadarOne;
	var canvasRadarTwo;
	var canvasLine;
	var lastMoveTime;
	import StudentInfo from './fragments/StudentInfo';
	import Plat from './fragments/Plat';
	import Grid from './fragments/Grid';
	import SummaryItem from './fragments/SummaryItem';
	import Knowledge from './fragments/Knowledge';
	import ExamRank from './fragments/ExamRank';
	import report from '@/mixins/report/index';
	import ReportService from '@/services/report/index';
	import uCharts from '@/components/u-charts/u-charts';
	import user from '@/mixins/user/index';
	import CustomSelect from './fragments/CustomSelect'
	import {
		isEmpty
	} from '@/utils/index';
	const reportService = new ReportService();
	export default {
		mixins: [report, user],
		components: {
			StudentInfo,
			Plat,
			Grid,
			SummaryItem,
			Knowledge,
			ExamRank,
			CustomSelect
		},
		data() {
			return {
				showSkeleton: true,
				noData: false,
				ascription: undefined,
				userId: undefined,
				studentData: {
					studentInfo: {
						username: '',
						studentNum: '',
						academy: '',
						major: '',
						team: ''
					}
				},
				knowledgeAnalysis: [],
				rank: [],
				pixelRatio: 1,
				radarOne: {
					width: uni.upx2px(710),
					height: uni.upx2px(500),
					categories: [],
					series: []
				},
				radarTwo: {
					width: uni.upx2px(710),
					height: uni.upx2px(500),
					categories: [],
					series: []
				},
				lineData:{
					width: uni.upx2px(710),
					height: uni.upx2px(300),
					categories: [],
					"series": [],
					score:{}
				},
				examList: [],
				currentValue: '',
				paperId: undefined,
				examId: undefined,
				keyName: "paperName",
				class_rank: 0,
				college_rank: 0,
				province_rank: 0,
				school_rank: 0
			}
		},
		computed: {
			showRadarOne() {
				return !isEmpty(this.radarOne.series);
			},
			showRadarTwo() {
				return !isEmpty(this.radarTwo.series);
			},
			showKnowledge() {
				return !isEmpty(this.knowledgeAnalysis);
			},
			showRank() {
				return !isEmpty(this.rank);
			},
			showLine(){
				return !isEmpty(this.lineData.categories);
			},
			major() {
				return ({
					"3": '公安',
					"2": '执法'
				})[this.ascription]
			}
		},
		onLoad(query) {
			this.ascription = query.ascription;
			this.userId = isEmpty(query.userId) ? this.userData.id : query.userId;
			this.loadData();
			this.loadLineData();
			//if(this.ascription==2){
				this.loadExamList();
			//}
		},
		methods: {
			studentExamData__rank(){
				reportService.studentExamData__rank({examId: this.examId}).then(
					res=>{
						console.log('res:',res)
						const {class_rank,college_rank,province_rank,school_rank} = res.result
						this.class_rank = class_rank;
						this.college_rank=college_rank;
						this.province_rank = province_rank;
						this.school_rank = school_rank
					}
				)
			},
			loadExamList(){
				const param = {
					ascription: this.ascription
				};
				reportService.examList(param).then(res=>{
						if(res.success){
							console.log('res:',res)
							this.examList = res.result
							if(this.examList.length>0){
								this.currentValue = this.examList[0].paperName	
								this.examId = this.examList[0].id;
								this.studentExamData__rank()
							}
						}
					}
				)
			},
			//请求折线图统计数据
			loadLineData(){
				const params = {
					userId: this.userId,
					ascription: this.ascription
				};
				reportService.lineData(params).then(res=>{
					if(res.success){
						this.lineData.categories = res.result.categories;
						this.lineData.series = res.result.series;
						this.lineData.score = res.result.score;
						if(!isEmpty(this.lineData.categories)){
							this.showLineCanvas('canvasLine',this.lineData);
						}
					}
				});
			},
			//重置数据,
			resetData() {
				this.examData = {};
				// this.radarOne.categories = [];
				this.radarOne.series = [];
				// this.radarTwo.categories = [];
				this.radarTwo.series = []
			},
			//获取学生数据
			loadData() {
				reportService.studentData({
					id: this.userId,
					ascription: this.ascription
				}).then((response) => {
					if (response.success) {
						this.studentData = response.result;
						this.handleRadarData(canvasRadarOne, response.result.errorRatio.first, this.radarOne, "radarOne");
						this.handleRadarData(canvasRadarTwo, response.result.errorRatio.second, this.radarTwo, "radarTwo");
						this.knowledgeAnalysis = this.knowledgeAnalysis.concat(response.result.knowledgeAnalysis);
						this.rank = this.rank.concat(response.result.rank);
					} else {
						this.noData = true;
						uni.showToast({
							title: response.message,
							icon: "none",
							duration: 2000
						})
					}
				}).then(() => {
					this.showSkeleton = false;
				})
			},
			showLineCanvas(canvasId, chartData) {
				let _self = this;
				canvasLine = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					colors: ['#facc14', '#f04864', '#8543e0', '#90ed7d'],
					fontSize: 11,
					padding: [15, 15, 0, 15],
					legend: false,
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						disableGrid:true
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
					},
					width: _self.lineData.width * _self.pixelRatio,
					height: _self.lineData.height * _self.pixelRatio,
				});
			},
			touchEndLine(e){
				let self = this;
				canvasLine.showToolTip(e, {
					format: function (item, category) {
						return `排行:${item.data}\n成绩:${self.lineData.score[category]}`;
					}
				});
			},
			
			//成绩榜页面
			lookMore() {
				uni.navigateTo({
					url: `/pages/report/examRankPage?ascription=${this.ascription}&userId=${this.userId}`
				})
			},
			//请求考试分析数据
			loadExamData() {
				reportService.examData({
					paperId: this.paperId,
					examId: this.examId
				}).then((response) => {
					if (response.success) {
						this.examData = response.result;
						this.handleRadarData(canvasRadarOne, response.result.errorRatio.first, this.radarOne, 'canvasOne');
						this.handleRadarData(canvasRadarTwo, response.result.errorRatio.second, this.radarTwo, 'canvasTwo');
					} else {
						uni.showToast({
							title: response.message,
							icon: 'none',
							duration: 2000
						})
					}
				}).then(() => {
					this.showSkeleton = false;
				})
			},
			//模考大赛改变。重新请求数据
			examChange(item) {
				console.log('哈哈哈',item)
				this.paperId = item.paperId;
				this.examId = item.id;
				this.currentValue = item.paperName;
				// this.resetData();
				// this.loadExamData();
				this.studentExamData__rank();
			}
		}

	}
</script>


<style lang="scss" scoped>
	.error {
		text-align: center;
	}

	.content {
		background-color: #ffffff;
		padding: 0 20upx;
	}

	.select {
		margin: 40upx 0;
		height: 80upx;
		box-shadow: 0px 4upx 20upx 0px rgba(153, 153, 153, 0.15);
		border-radius: 8upx;
		border: solid 2upx #f7f7f7;
		color: #333333;
		font-size: 28upx;
	}

	.summary {
		background-color: #5ea1f8;
		border-radius: 8upx;
	}

	.chart {
		width: 710upx;
		height: 500upx;
		// background-color: #0060F4;

		&-title {
			text-align: center;
			font-size: 30upx;
			color: #5ea1f8;
			font-weight: 600;
			line-height: 110upx;
		}
	}
	
	.canvas-line{
		width: 710upx;
		height: 500upx;
	}

	.look-more {
		font-size: 24upx;
		color: #999999;
		text-align: center;
		line-height: 60upx;
	}
	.cus-select {
		display: inline-block;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		font-size: 30upx;
		color: #333333;
		background-color: #ffffff;
		box-shadow: 0 4upx 20upx 0 rgba(153, 153, 153, 0.15);
		border-radius: 8upx;
		border: solid 2upx #f7f7f7;
		margin: 40upx 0;
	}
	.student-rank {
		display: flex;
		text-align: center;
		font-size: 30upx;
		color: #333;
		border-top: 1px solid #e0e0e0;
		border-bottom: 1px solid #e0e0e0;
		padding: 30upx 0;
		&-item {
			flex: 1;
			
			.tit {
				font-size: 20upx;
				margin-top: 20upx;
			}
		}
	}
</style>
